<template>
  <div>
  	<transition name="slide-fade">
			<component 
				v-bind:is="currentComponent.instance"
				:components-data='currentComponent.componentsData'
				@emit-components='currentComponent.emitInvoking'>
			</component>
		</transition>
  	<div class='toc_IM_header'>
  		<tocIMheaderLc :is='tocIMheader.lc' style='left: 10px;'></tocIMheaderLc>
			<!--<span style='display: inline-block;position: absolute; left: 10px;'>
				<img v-bind:src="imgConfig.back" style='width: 16px;'>
			</span>-->
  		{{tocIMheader.title}}
  		<tocIMheaderRc :is='tocIMheader.rc' @emit-components='getTocIMheaderemitData' style='right: 0px;'></tocIMheaderRc>
  	</div>
    <tabBar></tabBar>
  </div>
</template>

<script>
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import headerComponents from '@/components/headerComponents.vue'
	import tabBar from '@/components/tabBar.vue'
	import choosePerson from '@/components/choosePerson.vue'
	import chooseGroup from '@/components/chooseGroup.vue'
	export default {
  	name: 'main',
  	created(){
  		this.$bus.on('tocIMheaderController', (data)=>{
  			this.tocIMheader.handlers=data.handlers;
  			this.tocIMheader.title=data.title;
  			this.tocIMheader.rc=data.rc;
  			if(data.invokeComponent!=undefined &&data.invokeComponent!=null){
  				this.currentComponent=data.invokeComponent;
  			}
  		});
  	},
  	mounted(){
  		
  	},
  	components:{tabBar,headerComponents,choosePerson,chooseGroup},
  	data(){
		    return {
		    	tocIMheader:{
		    		handlers:null,
		    		title:null,
		    		lc:null,
		    		rc:null
		    	},
		    	currentComponent:{
						instance:null,
						componentsData:null,
						emitInvoking:null,
						emitData:null
					},
		    	imgConfig:imgConfig,
		    	tocIMheaderRc:null
		    }
		},
		methods:{
			getTocIMheaderemitData(data){
				this[data.runFunction]();
			},
			createGroupChat(){
				this.currentComponent.instance=choosePerson;
				this.currentComponent.componentsData=null;
				this.currentComponent.emitInvoking=data=>{
					this.emitComponents(data)
				};
			},
			emitComponents(data){
				this.currentComponent.instance=null;
				this.currentComponent.componentsData=null;
			}
			
		}
  }
</script>